<!-- 修改资料 -->
<template>
    <el-form v-model="dateform" label-width="120px">
        <!-- 
        <el-upload ref="uploadFile" action='#' :http-request="uploadAction" :on-exceed="handleExceed" :limit="1"
            :show-file-list="false" :auto-upload="true" :before-upload="beforeUpload" style="width: 180px; height: 180px;"
            class="left-view">
            <img v-if="bannerUrl" :src="state.bannerUrl" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon" style="font-size: 30px;margin-top: 50px; margin-left: 50px;">
                <Plus />
            </el-icon>
        </el-upload> -->
        <RouterView />

        <el-form-item label="用户名">
            <el-input v-model="username" style="width: 200px;" readonly class="disabled" />
        </el-form-item>
        <el-form-item label="昵称">
            <el-input v-model="region" style="width: 200px;" />
        </el-form-item>
        <el-form-item label="性别">
            <el-radio-group v-model="resource">
                <el-radio label="未知" />
                <el-radio label="男" />
                <el-radio label="女" />
            </el-radio-group>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">修改</el-button>
        </el-form-item>
    </el-form>
</template>
<script>
import { toRefs, ref } from "@vue/reactivity";
import { reactive, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';

// import type { UploadRawFile, UploadFile, FormInstance, Action } from 'element-plus';
import { ElMessage, ElMessageBox } from 'element-plus';
// import { uploadImage } from '../../apis/project';
// import { UploadFile } from 'element-plus'
import { Delete, Download, Plus, ZoomIn } from '@element-plus/icons-vue'
import axios from "axios";



export default {
    name: 'BanaerManage',
    setup() {
        // 从localStorage中获取存储的JSON字符串  
        var userInfoJsonString = localStorage.getItem('userInfo');

        // 确保userInfoJsonString不是null，如果是null，那么将其设置为空字符串  
        if (userInfoJsonString === null) {
            userInfoJsonString = "{}";
        }
        // 解析JSON字符串为JavaScript对象  
        var userInfo = JSON.parse(userInfoJsonString);
        const uploadFile = ref();
        let token = localStorage.getItem('token');
        let longtoken = localStorage.getItem('longtoken');
        let route = useRoute();
        let router = useRouter();
        const state = reactive({
            bannerUrl: userInfo.avatar,
            fileName: '',
        })

        const dateform = reactive({
            username: userInfo.username,
            region: userInfo.nickname,
            resource: userInfo && userInfo.sex ? userInfo.sex : '未知',
        });

        function handleExceed(files, fileList) {
            if (state.fileList.length >= 1) {
                ElMessage.error('只能上传一个图片');
                return;
            }
        }
        function beforeUpload(file) {
            var type = ['image/jpeg', 'image/jpg', 'image/png'];
            if (type.indexOf(file.type) === -1) {
                ElMessage.error('上传的文件必须是JPG、JPEG、PNG三种之一!');
                return false;
            } else if (file.size / 1024 / 1024 > 2) {
                ElMessage.error('图片大小不能超过2MB!');
                return false;
            }
            return true;
        }
        //修改头像
        function uploadAction(option) {
            var formData = new FormData();
            formData.append('file', option.file);
            formData.append('userId', userInfo.id);
            axios({
                method: 'POST',
                url: '/user/updateUserImg',
                data: formData

            }).then(response => {
                if (response.code === 200) {
                    console.log(response.data);
                    ElMessage.success('头像上传成功');

                    //更新localStorage中对象
                    localStorage.setItem('userInfo', JSON.stringify(response.data));
                    location.reload();

                }
                else {
                    ElMessage.error('头像上传失败!');
                }
            })
        }

        const onSubmit = () => {
            axios.get('/user/updateUserInfo', {
                params: {
                    sex: dateform.resource,
                    nickname: dateform.region,
                    userId: userInfo.id
                },
                headers: {
                    token: token,
                    longtoken: longtoken
                }
            }).then(response => {

                if (response.code === 200) {
                    ElMessage.success('修改成功');
                    console.log(response.data);
                    localStorage.setItem('userInfo', JSON.stringify(response.data));
                    location.reload();
                } else {
                    ElMessage.error('修改失败');
                }
            })
        };
        onMounted(async () => {
            goback();
        })
        function goback() {
            router.push("/changePic");
        }

        return {
            goback,
            route,
            router,
            uploadAction,
            beforeUpload,
            handleExceed,
            state,
            // uploadFile,
            onSubmit,
            ...toRefs(dateform),
            token,
            longtoken,
        };
    },
}
</script>
<style>
.disabled {
    cursor: not-allowed;
}
</style>